<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../include.jsp"%>
<link rel="stylesheet" href="${ctx }/static/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.refresh{margin:0; background: url(${ctx}/static/lib/zTree_v3/css/zTreeStyle/img/diy/arrow_refresh.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>

<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <h4 class="modal-title" id="layoutModalLabel"><strong>角色权限分配</strong></h4>
</div>
<div class="modal-body">
  <form method="post" class="form-horizontal" action="${ctx }/admin/admin/roles/alloc/save">
   			<div class="form-group">
   				 <label class="col-sm-2 control-label" for="permission">权限列表</label>
   				 <div class="col-sm-10" id="permissList">
   				<%--  <c:if test="${not empty permiss }">
   				 	<c:forEach items="${permiss }" var="per">
   				 	<p><input type="checkbox" name="permission" value="${per.permCode }"
   				 		<c:forEach items="${currentList }" var="cur">
   				 			 <c:if test="${per.permCode==cur.permCode }">checked="checked"</c:if>
   				 		</c:forEach>/>
   				 				${per.permName }
   				 			</p>
   				 	</c:forEach>
   				 </c:if> --%>
   					<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
   				 </div>
   			</div>
   			<div class="form-group hide">
				<!-- 隐藏区域 -->
				<c:forEach items="${ids }" var="id">
					<input type="hidden" class="form-control"  name="id" value="${id }">
				</c:forEach>
			</div>
 </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  <button type="button" class="btn btn-primary" id="submitForm">提交</button>
</div>
<%-- <script type="text/javascript" src="${ctx }/static/admin/js/adminroles/alloc.js"></script> --%>

<script type="text/javascript" src="${ctx }/static/lib/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${ctx }/static/lib/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="${ctx }/static/lib/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>
<script>
var zTree;
var demoIframe;
var seclectNode ;
var tree = 'tree' ;
var log, className = "dark";
$(function(){
	/* var currentList = '${currentList}';
	 if('' != currentList){
		 currentList = JSONObject.forObject(currentList);
		currentList = $.parseJSON(currentList); 
		currentList = $.parseJSON(currentList);
		alert(currentList.length);
	}  */
	var setting = {
	    	async: {
	    		type: 'post',
	    		dataType:'json',
	    		dataFilter: dataFilter ,
	    		autoParam:["permId"],
	    		url: ctx + '/admin/admin/roles/alloc',
	    		enable: true
	    	},
	    	view: {
	    		dblClickExpand: true,
	    		showLine: false,
	    		selectedMulti: true,
	    		expandSpeed:""
	    	},
	    	edit: {
				enable: false
			},
	    	data: {
	    		key:  {
	    			checked: 'checked',
	    			children: 'children' ,
	    			name: 'permName' ,
	    			title:'description' ,
	    			url: ''	
	    		},
	    		simpleData: {
	    			enable:true,
	    			idKey: "permId",
	    			pIdKey: "parentPermId",
	    			rootPId: ""
	    		}
	    	},
	    	callback: {
	    		beforeClick: beforeClick
	    	}
	    };
		function dataFilter (treeId, parentNode, data){
	    	console.debug('dataFilter is  ' , treeId, parentNode, data) ;
	    	
	    	if (!data || data.code != 1) return null;
	    	var childNodes = data.data ;
	    	for (var i=0, l=childNodes.length; i<l; i++) {
	    		childNodes[i].isParent = true;
	    	}
	    	
	    	return childNodes;
	    }
		function beforeClick(treeId, treeNode) {
	    	seclectNode = treeNode ;
		    return true;
		}
	$.fn.zTree.init($("#" + tree), setting);
	

	/* $('.form-horizontal').validate({
	    errorElement : 'span',
	    errorClass : 'help-block',
	    focusInvalid : false,
	    rules : {
	    			permission:{maxlength:[20],required:true},
					description:{maxlength:[200],required:true}
	    },
	    messages : {
	    	permission:{maxlength:'输入长度最多是20的字符串(汉字算一个字符).',required:'该项为必填项.'},
					description:{maxlength:'输入长度最多是200的字符串(汉字算一个字符).',required:'该项为必填项.'}
	    },
	
	    highlight : function(element) {
	        $(element).closest('.form-group').addClass('has-error');
	    },
	
	    success : function(label) {
	        label.closest('.form-group').removeClass('has-error');
	        label.remove();
	    },
	
	    errorPlacement : function(error, element) {
	        element.parent('div').append(error);
	    }
	});
	
	
	$('#submitForm').on('click' ,function(){
		$submit = $(this) ;
		var permissions = document.getElementsByName("permission");
		var roleIds = document.getElementsByName("id");
		
		var pers = [],ids = [];
		for(var i = 0;i < permissions.length;i ++){
			if(permissions[i].checked){
				pers.push(permissions[i].value);
			}
		}
		for(var i = 0;i < roleIds.length;i ++){
			ids.push(roleIds[i].value);
		}
		$submit.addClass('disabled') ;
		if(!$(".form-horizontal").validate().form()){
			$submit.removeClass('disabled') ;
			return false ;
		}
		XHZ.post($(".form-horizontal").attr('action'),{permission:pers.toString(),roleIds:ids.join(",")},function(data){
			var msg = "分配成功" ;
			$('#layoutModal').modal('hide') ;
			if(1 == data.code){
				$('.actionBar .glyphicon-refresh').click() ;
			}else{
				msg = data.message ;
			}
			$submit.removeClass('disabled') ;
			$('#alertModal .modal-body').html(msg) ;
			$('#alertModal').modal({
				backdrop: 'static' ,
				show: true
			}) ;
		});
	}) ; */

});

</script>